<template>
  <div class="content">
    <div class="content-main">
      <el-tabs v-model="queryParams.levelCode" class="demo-tabs" @tab-change="getList">
        <el-tab-pane
          v-for="level in levelCodes"
          :key="level.dictionaryCode"
          :label="level.dictionaryName"
          :name="level.dictionaryCode"
        ></el-tab-pane>
      </el-tabs>
      <div class="btn-list-wrap">
        <div class="btn-list">
          <el-tabs v-model="queryParams.areaCode" @tab-change="getList">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane
              v-for="area in areaDictCodes"
              :key="area.dictionaryCode"
              :label="area.dictionaryName"
              :name="area.dictionaryCode"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="list-wrap">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in list" :key="index">
            <div class="list-info" @click="jumpPage(item)">
              <div class="list-info-img">
                <el-image
                  style="width: 100%; height: 220px"
                  :src="item.image || defaultImg"
                  fit="cover"
                />
                <!-- <i class="center-list-bg"></i> -->
              </div>
              <div class="list-title">
                <span>{{ item.centreName }}</span>
                <el-icon>
                  <TopRight />
                </el-icon>
              </div>
            </div>
          </el-col>
          <el-col :span="24" :offset="0">
            <div class="pagination">
              <el-pagination
                :current-page="queryParams.pageNum"
                :page-size="queryParams.pageSize"
                background
                layout="prev, pager, next, jumper, total"
                :total="queryParams.total"
                @current-change="currentChange"
              /> </div
          ></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { TopRight } from '@element-plus/icons-vue'
import { cmsCentreBlurb } from '@/api'
import defaultImg from '@/assets/images/center-list-bg.png'
const dictStore = useDictStore()
dictStore.fetchDictionary()
const levelCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_LEVEL_CODE')
})
const areaDictCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_AREA_CODE')
})

const list = ref([])
const queryParams = reactive({
  name: '',
  pageNum: 1,
  pageSize: 9,
  levelCode: 'National',
  areaCode: 'first',
  total: 0
})

const router = useRouter()

function jumpPage(item) {
  router.push({
    path: 'centerIntroductoryDetails',
    query: { id: item.id, centreName: item.centreName }
  })
}

function currentChange(val) {
  queryParams.pageNum = val
  getList()
}

function getList() {
  // const dictData = store.getters.dictionary;
  // console.log("dictData:", dictData);
  cmsCentreBlurb({
    pageNum: queryParams.pageNum,
    pageSize: queryParams.pageSize,
    centreName: queryParams.centreName,
    areaCode: queryParams.areaCode === 'first' ? '' : queryParams.areaCode,
    levelCode: queryParams.levelCode
  }).then((res) => {
    list.value = res.data.list
    queryParams.total = res.data.total
  })
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
  background-color: #f6faff;
}

.content-main {
  width: 1200px;
  min-height: 850px;
  margin: auto;

  .list-wrap {
    .list-info {
      margin-bottom: 20px;
      background-color: #fff;
      cursor: pointer;

      .list-info-img {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 220px;
      }

      .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding-right: 30px;
        padding-left: 20px;
        border-top: 1px solid #ebedf0;
        font-size: 16px;

        span {
          text-align: center;
          flex: 1;
        }
      }
    }

    .list-info-province {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 180px;
      margin-bottom: 20px;
      background: url('@/assets/images/province-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .btn-list-wrap {
    display: flex;
    align-items: baseline;

    .btn-list {
    }
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
  }
}
</style>
